<template>
	<div class="home" id="home" name="home">

		<!-- 轮播图 -->
		<div class="block">
			<el-carousel height="460px">
				<el-carousel-item v-for="item in carousel" :key="item.carousel_id">
					<img style="height:460px;" :src="$target + item.imgPath" :alt="item.describes" @tap="TabCardClick(item)" />
				</el-carousel-item>
			</el-carousel>
		</div>
	<!-- 轮播图END -->

	<div class="main-box">
		<div class="main">
			<!-- 手机商品展示区域 -->
			<div class="phone">
				<div class="box-hd">
					<div class="title">水彩画</div>
				</div>
				<div class="box-bd">
					<!-- 左部 -->
					<div class="promo-list">
						<router-link to>
							<img :src="$target +'public/imgs/phone/phone.png'" />
						</router-link>
					</div>
					<!-- 右部 -->
					<div class="list">
						<MyList :list="phoneList" :isMore="true"></MyList>
					</div>
				</div>
			</div>
			<!-- 手机商品展示区域END -->
			<!-- 家电商品展示区域 -->
			<!-- 家电商品展示区域END -->
			<!-- 配件商品展示区域 -->
			<!-- 配件商品展示区域END -->
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		created() {
			this.getTabCard()
		},
		data() {
			return {
				carousel: "", // 轮播图数据 
				phoneList: "", // 手机商品列表
			}
		},
		methods: {
			TabCardClick() {
				console.log('选择了轮播图');
			},
			getTabCard() {
				this.carousel =
					`{"code":"001","carousel":[{"carousel_id":1,"imgPath":"public/imgs/cms_1.jpg","describes":"123456"},{"carousel_id":2,"imgPath":"public/imgs/cms_2.jpg","describes":"123456"},{"carousel_id":3,"imgPath":"public/imgs/cms_3.jpg","describes":"123456"},{"carousel_id":4,"imgPath":"public/imgs/cms_4.jpg","describes":"123456"}]}`
			}
		}
	}
</script>


<style scoped>
	@import "../assets/css/index.css";
</style>
